<template>
  <div class="loginBox">
    <van-nav-bar title="登录" fixed placeholder
    left-arrow @click-left="onClickLeft"/>
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="tel"
        label="手机号"
        placeholder="手机号"
        :rules="telRules"
      />
      <div class="getCode">
        <van-field
        v-model="password"
        name="password"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
      <template #button>
        <van-button size="small" color="#7232dd" plain @click="getCode" v-if="showbtn">发送验证码</van-button>
        <van-button class="count" color="#7232dd" plain size="small" v-else>{{code_ts}}</van-button>
      </template>
      </van-field>
      <!-- <van-button color="#7232dd" plain size="mini" @click="getCode" v-if="showbtn">验证码</van-button> -->
        <!-- <van-button class="count" color="#7232dd" plain size="mini" v-else>{{code_ts}}</van-button> -->
      </div>
     
      <div style="margin: 30px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <div style="float: right; font-size:14px">
			<!-- <router-link to="/reg">没有账号？点击注册</router-link> -->
		</div>
  </div>
</template>

<script>
import jwtDecode from "jwt-decode";
export default {
  name:'login',
  data () {
    return {
      showbtn: true, // 展示获取验证码或倒计时按钮判断
      code_ts: '获取验证码', //倒计时提示文字
      sec: 60 ,// 倒计时秒数
      phone: '',
      password: '',
      telRules: [{
            required: true,
            message: '手机号码不能为空',
            trigger: 'onBlur'
        }, {
          // 自定义校验规则
            validator: value => {
                return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                    .test(value)
            },
            message: '请输入正确格式的手机号码',
            trigger: 'onBlur'
        }],
     
    }
  },
  methods: {
    getCode(){
      this.$axios.post('/api/market/login/phone?phone='+this.phone).then((res)=>{
        console.log(res)
        if(res.data.code==200){
          this.$toast.success('验证码已发送，请注意查收');
           var timer = setInterval(() => {
              this.sec = this.sec-1
              this.code_ts = this.sec + 'S后重试'
              this.showbtn = false
              if (this.sec === 0) {
                  clearInterval(timer)
                  this.sec = 60
                  this.code_ts = this.sec + 'S后重试'
                  this.showbtn = true
              }
          }, 1000)
        }else{
           this.$toast.success(res.data.msg)
        }
      })
     
    },
    onSubmit(values) {
      console.log('submit', values);
      this.$axios.post('/api/market/login/loginPhone?userPhone='+this.phone+"&vcode="+values.password).then((res)=>{
        // console.log(res)
        if(res.data.code==200){
          console.log(res.data.data)
          sessionStorage.setItem('isLogin',true)
          const decode = jwtDecode(res.data.data);
          console.log(JSON.parse(decode.data)[0]);
          // debugger
          sessionStorage.setItem('token',res.data.data)
          sessionStorage.setItem('user',JSON.stringify(JSON.parse(decode.data)[0]))
          this.$toast.success(res.data.msg)
          this.$router.push('/my')
        }else{
          this.$toast.fail(res.data.msg)
        }
      })
    },
    onClickLeft(){
      this.$router.push('/my')
    }
  }
}
</script>

<style  scoped>
.loginBox{
  margin: 50px 10px;
  padding: 20px;
}
/* .getCode{
  display: flex
}
.getCode>.van-field{
  width: 80%;
} */
/* .getCode>.van-button{
  margin-top: 10px;
}
.count{
  font-size: 10px;
  width: 66px;
} */
</style>
